<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
	<head>
		<meta charset="utf-8">
		<meta content="width=device-width" name="viewport">
		<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">
		<title>网站缩略图生成</title>
		<meta name="keywords" content="网站缩略图，在线生成缩略图，多设备网站缩略图，生成缩略图" />
		<meta name="description" content="网站缩略图在线生成工具站（ShrinkTheWeb，简称STW）是一个强大实用的免费网站缩略图在线生成服务站，它能够在短短的几秒钟内，透过您所输入的网址请求，产生该网站或网页的缩图。" />
		<meta content="在线生成网站多设备缩略图" name="description">
		<style>
			body {
				background-color: #fff;
				background-image: url("../img/background.jpg");
				background-size: 100%;
				background-size: cover;
				margin-top: 20px;
				font-family: 'RobotoMedium';
				margin: 0;
				padding: 0
			}
			fieldset {
				border: none
			}
			label {
				float: left;
				text-indent: -99999px
			}
			input {
				width: 85%;
				margin-right: 1%;
				height: 2em;
				font-size: 1.6em;
				float: left
			}
			h3,dl,dd,dt {
				margin: 1em 2em
			}
			h2 {
				margin: 1em
			}
			dt {
				font-weight: bold
			}
			p {
				line-height: 1.6;
				margin: 1em 2em
			}
			p.intro {
				clear: both
			}
				color: #101010;
				text-decoration: none;
				transition: all 1s ease-in-out;
			}
			a:hover {
				color: #cc4e46;
				background-color: #ede6dc
			}
			.button {
				background-color: #249aff;
				color: #cc4e46;
				width: 8%;
				line-height: 1.5em;
				margin: 0;
				font-size: 2em;
				text-align: center;
				float: left;
				border: solid 1px #8e352e;
				box-shadow: 0 0 3px #333
			}
			.button:hover {
				background-color: #cc4e46;
				color: #ede6dc
			}
			.promos {
				background: #fff;
				width: 100%;
				position: relative;
				border-top: 5px solid;
				border-bottom: 5px solid;
				margin: 2em auto;
				padding: 2em 0
			}
			.promos h2 {
				text-align: center;
				margin-top: 0
			}
			.ebook {
				border-right: 3px solid
			}
			.promos .button {
				width: 100%;
				font-size: 1.5em;
				background-color: #cc4e46;
				color: #ede6dc
			}
			.ebook,.bookmarklet {
				width: 49%;
				float: left
			}
			h1 {
				text-transform: uppercase;
				text-align: center
			}
			.wrapper {
				width: 90%;
				max-width: 1200px;
				margin: 0 auto
			}
			.netawards {
				position: absolute;
				top: 0;
				right: 0;
				width: 125px;
				height: 125px;
				background-image: url(/img/NETawards_ribbon.png)
			}
			.netawards a {
				display: block;
				width: 125px;
				height: 125px;
				text-indent: -999999px
			}
			.netawards a:hover {
				background-color: transparent
			}
			.display {
				position: relative;
				left: 0px;
				height: 600px
			}
			.url {
				float: left;
				background-color: #cc4e46;
				width: 100%;
				margin: 0 auto;
				box-shadow: 0px -2px 5px #333
			}
			form {
				width: 85%;
				margin: 1em auto
			}
			div {
				background-repeat: no-repeat;
				background-size: 100%;
				overflow: hidden
			}
			iframe {
				transform: scale(0.219);
				-webkit-transform: scale(0.219);
				-o-transform: scale(0.219);
				-ms-transform: scale(0.219);
				-moz-transform: scale(0.219);
				transform-origin: top left;
				-webkit-transform-origin: top left;
				-o-transform-origin: top left;
				-ms-transform-origin: top left;
				-moz-transform-origin: top left;
				margin: 0;
				padding: 0;
				position: relative;
				background-color: #fff;
				border-color: #000
			}
			.mobile {
				background-image: url("../img/iphone-optimised.png");
				position: absolute;
				width: 95px;
				height: 196px;
				top: 375px;
				left: 300px;
				z-index: 5
			}
			.mobile iframe {
				width: 320px;
				height: 480px;
				top: 32px;
				left: 11px;
				overflow-y: hidden
			}
			.tablet {
				background-image: url("../img/ipad-optimised.png");
				width: 246px;
				height: 400px;
				z-index: 3;
				position: absolute;
				left: 120px;
				top: 230px
			}
			.tablet iframe {
				width: 768px;
				height: 1024px;
				top: 35px;
				left: 38px;
				overflow-y: hidden
			}
			.laptop {
				background-image: url("../img/laptop-screen-optimised.png");
				width: 477px;
				height: 307px;
				top: 264px;
				left: 560px;
				position: absolute;
				z-index: 2
			}
			.laptop iframe {
				width: 1280px;
				height: 802px;
				top: 26px;
				left: 60px;
				transform: scale(0.277);
				-webkit-transform: scale(0.277);
				-o-transform: scale(0.277);
				-ms-transform: scale(0.277);
				-moz-transform: scale(0.277);
				transform-origin: top left;
				-webkit-transform-origin: top left;
				-o-transform-origin: top left;
				-ms-transform-origin: top left;
				-moz-transform-origin: top left
			}
			.desktop {
				position: absolute;
				width: 566px;
				height: 538px;
				background-image: url("../img/large-screen-optimised.png");
				top: 0px;
				left: 220px;
				z-index: 1
			}
			.desktop iframe {
				left: 28px;
				top: 38px;
				width: 1600px;
				height: 992px;
				transform: scale(0.3181);
				-webkit-transform: scale(0.3181);
				-o-transform: scale(0.3181);
				-ms-transform: scale(0.3181);
				-moz-transform: scale(0.3181);
				transform-origin: top left;
				-webkit-transform-origin: top left;
				-o-transform-origin: top left;
				-ms-transform-origin: top left;
				-moz-transform-origin: top left
			}
			.about-tool {
				font-size: 1.2em;
				max-width: 64em;
				width: 80%;
				margin: 1em auto
			}
			.about-tool li {
				margin-bottom: 0.5em;
				line-height: 1.2
			}
			@media (max-width: 1160px) {
				.display {
					width: 95%;
					height: 550px;
					transform: scale(0.81);
					-webkit-transform: scale(0.81);
					-o-transform: scale(0.81);
					-ms-transform: scale(0.81);
					-moz-transform: scale(0.81)
				}
				.desktop {
					left: 180px
				}
				.laptop {
					left: 520px
				}
				.tablet {
					left: 80px
				}
				.mobile {
					left: 260px
				}
				input {
					width: 88%
				}
			}
			@media (max-width: 1070px) {
				.display {
					left: -50px
				}
			}
			@media (max-width: 1000px) {
				.display {
					height: 500px;
					transform: scale(0.71);
					-webkit-transform: scale(0.71);
					-o-transform: scale(0.71);
					-ms-transform: scale(0.71);
					-moz-transform: scale(0.71);
					top: -40px
				}
				.desktop {
					left: 140px
				}
				.laptop {
					left: 480px
				}
				.tablet {
					left: 40px
				}
				.mobile {
					left: 220px
				}
			}
			@media (max-width: 850px) {
				.display {
					height: 500px;
					transform: scale(0.65);
					-webkit-transform: scale(0.65);
					-o-transform: scale(0.65);
					-ms-transform: scale(0.65);
					-moz-transform: scale(0.65)
				}
				.desktop {
					left: 100px
				}
				.laptop {
					left: 440px
				}
				.tablet {
					left: 0px
				}
				.mobile {
					left: 180px
				}
			}
			@media (max-width: 768px) {
				.display {
					height: 450px;
					transform: scale(0.55);
					-webkit-transform: scale(0.55);
					-o-transform: scale(0.55);
					-ms-transform: scale(0.55);
					-moz-transform: scale(0.55)
				}
				.button {
					font-size: 1.6em;
					line-height: 1.75em;
					margin-top: 0.5em;
					width: 100%
				}
				input {
					height: 1.2em;
					width: 100%
				}
			}
			@media (max-width: 670px) {
				.display {
					height: 400px;
					left: -70px;
					transform: scale(0.45);
					-webkit-transform: scale(0.45);
					-o-transform: scale(0.45);
					-ms-transform: scale(0.45);
					-moz-transform: scale(0.45)
				}
			}
			@media (max-width: 580px) {
				input {
					font-size: 1.4em;
					height: 1.4em;
					width: 100%
				}
				.button {
					width: 100%;
					float: left;
					font-size: 1.4em;
					margin-top: 0.5em
				}
			}
			@media (max-width: 560px) {
				.display {
					height: 270px;
					top: -65px;
					transform: scale(0.37);
					-webkit-transform: scale(0.37);
					-o-transform: scale(0.37);
					-ms-transform: scale(0.37);
					-moz-transform: scale(0.37)
				}
			}
			@media (max-width: 440px) {
				.display {
					left: -17px;
					top: -65px;
					width: 70px;
					transform: scale(0.35);
					-webkit-transform: scale(0.35);
					-o-transform: scale(0.35);
					-ms-transform: scale(0.35);
					-moz-transform: scale(0.35)
				}
			}
			@media (max-width: 380px) {
				.display {
					height: 235px;
					left: -17px;
					top: -65px;
					width: 70px;
					transform: scale(0.27);
					-webkit-transform: scale(0.27);
					-o-transform: scale(0.27);
					-ms-transform: scale(0.27);
					-moz-transform: scale(0.27)
				}
				.desktop {
					left: 100px
				}
				.laptop {
					left: 515px
				}
				.tablet {
					left: 0px
				}
				.mobile {
					left: 180px
				}
				h1 {
					font-size: 1.2em
				}
				p {
					margin: 1em
				}
			}
			.button1 {
				background-color: #ede6dc;
				border: 1px solid #8e352e;
				box-shadow: 0 0 3px #333;
				color: #cc4e46;
				float: left;
				line-height: 1.7em;
				margin: 0;
				text-align: center;
				width: 80%;
			}
			#carbonads { 
				max-width: 400px; 
				margin: 1em auto;
			}
			/* To position the text beside the image: */
			.carbon-img { 
				float: left;
				margin-right:8px; 
			}
			.carbon-text { 
				display: block; 
			}
			/* To separate the attribution from the text: */
			.carbon-poweredby { 
				float: right; 
			}
			.carbon-text {
				padding: 8px; 
			}
			/* To add a border around the ad: */
			#carbonads { 
				padding: 15px;
				border: 1px solid #ccc; 
			}
			/* To style the text and attribution: */
			.carbon-text {
				font-size: 12px;
				color: orange;
			}
			.carbon-poweredby {
				font-size: 75%;
			}
			.ad {
				text-align: center;
				 padding: 1em;
				 }
	</style>
<!-- IE8 BugFixes thanks to @ingozoell details arehttps://github.com/justincavery/am-i-responsive/issues/2?utm_source=buffer&utm_campaign=Buffer&utm_content=buffer8b8d6&utm_medium=twitter -->
<!--[if IE 8]>
<style>
.desktop iframe {
-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=0.3181, M12=0, M21=0, M22=0.3181, SizingMethod='auto expand')";
}
.laptop iframe {
-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=0.277, M12=0, M21=0, M22=0.277, SizingMethod='auto expand')";
}
.tablet iframe {
-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=0.234, M12=0, M21=0, M22=0.234, SizingMethod='auto expand')";
}
.mobile iframe {
-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=0.219, M12=0, M21=0, M22=0.219, SizingMethod='auto expand')";
}
</style>
<![endif]-->
		<!--[if lte IE 7]>
<style>
.desktop iframe {
filter: progid:DXImageTransform.Microsoft.Matrix(
M11=0.3181,
M12=0,
M21=0,
M22=0.3181,
SizingMethod='auto expand');
}
.laptop iframe {
filter: progid:DXImageTransform.Microsoft.Matrix(
M11=0.277,
M12=0,
M21=0,
M22=0.277,
SizingMethod='auto expand');
}
.tablet iframe {
filter: progid:DXImageTransform.Microsoft.Matrix(
M11=0.234,
M12=0,
M21=0,
M22=0.234,
SizingMethod='auto expand');
}
.mobile iframe {
filter: progid:DXImageTransform.Microsoft.Matrix(
M11=0.219,
M12=0,
M21=0,
M22=0.219,
SizingMethod='auto expand');
}
</style>
<![endif]-->
	</head>
	<body class="ami">
		<div class="wrapper">
			<section class="display">
				<div class="mobile ui-draggable">
					<div class="trim">
						<iframe id="mobile">
						</iframe>
					</div>
				</div>

				<div class="tablet ui-draggable">
					<div class="trim">
						<iframe id="tablet">
						</iframe>
					</div>
				</div>

				<div class="laptop ui-draggable">
					<div class="trim">
						<iframe id="laptop">
						</iframe>
					</div>
				</div>

				<div class="desktop ui-draggable">
					<div class="trim">
						<iframe id="desktop">
						</iframe>
					</div>
				</div>
			</section>
		</div>
		<section class="url">
			<div class="ad">
				<p>输入网址展示网站缩略图</p>
                <p>由于技术问题本站点仅支持https的站点缩略显示</p>
			</div>
			<h1></h1>
			<div id="rwdform">
				<input type="text" placeholder="请输入网站地址" class="button1" id="text_url" name="url">
				<button class="button" type="submit" onclick="to()">GO</button>
			</div>
		</section>
	</body>
	<script>
		if (window.location.href.indexOf("?") != -1) {
			document.getElementById("mobile").src = window.location.search.substr(1);
			document.getElementById("tablet").src = window.location.search.substr(1);
			document.getElementById("laptop").src = window.location.search.substr(1);
			document.getElementById("desktop").src = window.location.search.substr(1);
			document.getElementById("text_url").value=window.location.search.substr(1);
		}
		function to(){
			var url = document.getElementById("text_url").value;
		     if(url!==""){
		         window.location.href='?'+url;
		     }
		 }
	</script>
</html>
